import { Table, Popconfirm, Button } from 'antd';
// import TableRowSelection from 'antd/lib/table';
import { ProgramDetail, ModelReturn } from '@/data-type';
// import {PrivilegeUser} from '@/api-type';
// import { FormattedMessage } from 'umi'
import { useEffect, useState } from 'react';
import { useHistory } from 'react-router';
import { FormatterTime, getIdFromHistory } from '@/utils/kits';
// import { render } from '@umijs/deps/compiled/mustache';
import React from 'react';
// import ReactDOM from 'react-dom';
import { ColumnsType } from 'antd/lib/table'
import { needbackButton } from '@/utils/kits';

const ShowProgramDetail: React.FC<{
  model: ModelReturn<ProgramDetail>
}> = (params) => {
  const programDetails = params.model.dataSource;
  const onUpdate = params.model.updateOne;
  const onDelete = params.model.deleteById;
  const [showDetail, setShowDetail] = useState(false);
  const [addDrawer, setAddDrawer] = useState(false);
  const [currentRow, setCurrentRow] = useState<ProgramDetail>();
  //用于路由跳转
  const history = useHistory();
  let formRef = React.createRef<any>();
  function openUpdate(user: ProgramDetail) {
    // console.log("update user", user);
    setCurrentRow(user);
    setShowDetail(true);
    formRef.current.setFieldsValue(user);
  }
  const onCloseDrawer = () => {
    setShowDetail(false);
  }
  function openAddDrawer() {
    // setCurrentRow(material);
    setAddDrawer(true);
  }
  const closeAddDrawer = () => {
    setAddDrawer(false);
    // useEffect(()=>{
    //   params.model.query({}).then(data=>{
    //     params.model.dataSource=data;
    //   })
    // })
  }
  const tableColumns: ColumnsType<ProgramDetail> = [
    {
      title: 'ID',
      fixed: false,
      dataIndex: 'id',
    },
    {
      title: '项目ID',
      fixed: false,
      dataIndex: 'programId',
      // onFilter: (value:string, record: FullProgram) => record.programName?.indexOf(value) === 0,
    },
    {
      // title: 'Password',
      title: '设备名称',
      fixed: false,
      dataIndex: 'eqName',
    },
    {
      title: '设备型号',
      fixed: false,
      dataIndex: 'eqModel',
    },
    {
      title: '状态',
      fixed: false,
      dataIndex: 'status',
    },
    {
      title: '开始时间',
      dataIndex: 'startDate',
      width: '100',
      fixed: false,
      render: FormatterTime,
    },
    {
      title: '结束时间',
      dataIndex: 'endDate',
      width: '100',
      fixed: false,
      render: FormatterTime
    },
  ]
  const columns: ColumnsType<ProgramDetail> = [
    ...tableColumns,
    {
      title: '操作',
      fixed: 'right',
      width: '15%',
      render: (programDetail: ProgramDetail) => {
        return (
          <div>
            <Popconfirm title="是否删除?" onConfirm={() => onDelete(programDetail.id)} >
              <Button>删除</Button>
            </Popconfirm>
            <Button onClick={() => openUpdate(programDetail)}>更新</Button>
            
            {/* <Button onClick={() => openDrawer(programDetail)}>暂未启用</Button> */}
          </div >
        );
      },

    },
  ];
  const rowSelection = {
    onChange: (selectedRowKeys: React.Key[], selectedRows: ProgramDetail[]) => {
      // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    },
    getCheckboxProps: (record: ProgramDetail) => ({
      disabled: record.id === 123, // Column configuration not to be checked
      name: record.eqName,
    }),
  };
  // console.log("columns", users);
  return (
    <div>
      <Button onClick={() => openAddDrawer()}>新增</Button>
      <BackButton show={needbackButton(history.location.state)} history={history}></BackButton>
      <Table rowSelection={rowSelection}
        dataSource={programDetails}
        columns={columns}
        rowKey={'id'}
        scroll={{ x: 1500 }}
        onRow={(record) => {
          return {
            onDoubleClick: event => {
              // alert(record.programName);
              history.push("/page/other-cost", {
                "id": record.id
              });
              // console.log(record.id);
            }
          }
        }} />
      <UpdateDrawer onClose={onCloseDrawer}
        elem={currentRow as ProgramDetail}
        visible={showDetail}
        formRef={formRef}
        updateOne={onUpdate}
        datas={tableColumns}
      ></UpdateDrawer>
      <AddRecord onClose={closeAddDrawer}
        visible={addDrawer}
        save={params.model.saveOne}
        datas={tableColumns}
      ></AddRecord>
    </div>
  );
};

export default ShowProgramDetail;
import UpdateDrawer from './common/UpdateDrawer';
import BackButton from './common/BackButton';import AddRecord from './common/AddRecord';

